<template>
  <div :width="props.width" class="contact">
    <div class="message">
      <div class="left">
        <div class="title">个人信息表</div>
        <div class="unit">
          <span>发布单位:704铁公鸡 </span> <span>发表于:608</span>
          <span>实验室阅读次数54</span>
        </div>
        <div class="details">
          <div class="detail" v-for="item in message">
            <div class="de-left">{{ item.name }}</div>
            <div class="de-right">{{ item.value }}</div>
          </div>
        </div>
      </div>
      <img src="@/assets/images/serverbg.png" alt="" />
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  width: {
    type: String,
    default: "",
  },
  list: {
    type: Array,
    default: [],
  },
});
const message = ref([
  {
    // lab: {
    name: "实验室名称",
    value: "深圳市臻典装饰家居有限公司",
    // },
  },
  {
    // server: {
    name: "服务方身份",
    value: "企业机构",
    // },
  },
  {
    // place: {
    name: "所在地区",
    value: "深圳市臻典装饰家居有限公司",
    // },
  },
  {
    // profession: {
    name: "应用行业",
    value: "采矿和采石",
    // },
  },
]);
</script>

<style scoped lang="scss">
.contact {
  background-color: #fff;

  transition: all 0.5s ease-in-out;
}
.contact:hover {
  /* x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
  //box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.1);
 // transform: translateY(-3px);
}
.message {
  margin-bottom: 30px;
  padding: 60px 50px 30px;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  .left {
    .title {
      font-size: 36px;
      font-weight: bold;

      line-height: 54px;
    }
    .unit {
      display: flex;
      margin-top: 10px;
      > span {
        color: $grey;
        margin-right: 20px;
      }
    }
    .details {
      margin-top: 30px;
      .detail {
        display: grid;
        grid-template-columns: 2fr 6fr;
        padding: 15px 0;
        .de-left {
          color: $grey;
        }
        .de-right {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }
  > img {
    width: 200px;
    height: 200px;
  }
}
</style>
